<template>
	<view class="content">
		<view class="searchBar" @click="goSearch">
			<view class="search">
				<text class="icon iconfont icon-sousuotianchong"></text> 搜索
			</view>
		</view>
		<scroll-view scroll-x="true">
			<view class="categoryMenu">
				<view @click="select(index)" v-for="(c,index) in category"
					:class="{categoryItem:true,active:(index==selectIndex)}">
					{{c.name}}
					<view class="line"></view>
				</view>
			</view>
		</scroll-view>
		<articlelist :list="articleList"></articlelist>
	</view>
</template>

<script>
	import {
		onPullDownRefresh, //下拉事件
		onReachBottom //触底事件
	} from '@dcloudio/uni-app';
	import home from '@/apis/home';
	import formatDate from '@/utils/formatDate.js'
	import {
		onMounted,
		ref,
		reactive,
		toRefs
	} from "vue";
	export default {
		onLoad() {
			uni.setNavigationBarColor({
				backgroundColor: '#0f9209',
				frontColor: "#ffffff"
			})
		},

		setup() {

			const page = ref(1);
			const pagesize = ref(20);
			const category = ref([]);
			const selectIndex = ref(0);
			const articleList = ref([]);

			//页面挂载完毕之后只做一次
			onMounted(() => {
				home.get_cate_list().then(res => {
					category.value = res.data.data;
					// console.log(category.value);

					//默认选中第一个分类
					select(0);


				}).catch(err => {
					console.log(err);
				});
			})

			//		选择分类
			const select = async (index) => {
				selectIndex.value = index;
				articleList.value = [];
				page.value = 1;
				getData();
			}


			//加载数据
			const getData = () => {
				uni.showLoading({
					title: "加载中..."
				})

				setTimeout(async () => {

					const data = await home.get_article_list({
						cate_id: category.value[selectIndex.value]._id,
						skip: ((page.value - 1) * pagesize.value),
						limit: pagesize.value
					});

					var list = data.data.data;
					console.log(list);
					//合并
					articleList.value = [...articleList.value, ...list];

					if (list.length == 0) {
						uni.showToast({
							title: "没有更多数据..."
						})
					}

				}, 800);
			}

			//将下来的事件封装在，steup里面，开始下拉刷新的动作，要做什么事情
			onPullDownRefresh(function() {
				articleList.value = [];
				page.value = 1;
				getData();
			})

			//触底
			onReachBottom(function() {
				page.value = page.value + 1;
				getData();
			})


			const goSearch = () => {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			}

			return {
				formatDate,
				category,
				selectIndex,
				select,
				articleList,
				goSearch
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("https://at.alicdn.com/t/c/font_3630446_w2q4khqm4ro.css");

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.categoryItem {
		padding: 15rpx 18rpx;
		font-size: $uni-font-size-title;
	}

	.searchBar {
		background-color: $ltt-assist-color;
		height: 100rpx;
		padding: 25rpx;
		width: 100%;

		.search {
			width: 90%;
			background-color: $ltt-primary-color;
			border-radius: 40rpx;
			height: 80rpx;
			margin: 0rpx auto;
			text-align: center;
			color: #ffffff;
			font-size: $uni-font-size-base;
			line-height: 80rpx;
		}
	}

	.categoryMenu {
		display: flex;
		flex-flow: nowrap row;
		justify-items: flex-start;
		width: fit-content; //当前元素的宽度是内容的实际宽度
		padding-bottom: 20rpx;


		.categoryItem {
			width: 200rpx;
			text-align: center;
			border: 1rpx solid #ccc;
			padding: 0rpx;
		}
	}

	.active {
		color: $ltt-assist-color;
		border-bottom: 1px solid $ltt-assist-color;

		.line {
			background-color: $ltt-assist-color;
			width: 30%;
			height: 5rpx;
			margin: 0rpx auto 0rpx auto;
		}
	}
</style>
